
<template>
  <div :style="style" class="drag-box" :class="className" @click="$emit('click')">
    <el-form-item class="item" :label="element.label">
      <template v-if="element.type === 'buttons'">
        <template v-for="btn in element.list">
          <el-button v-bind="btn">{{ btn.label }}</el-button>
        </template>
      </template>
      <template v-else>
        <component :is="element.type" v-model="value" v-bind="element.props" :itemData="element" style="width: 100%;">
          <template v-if="element.type === 'el-select'">
            <el-option v-for="o in element?.options?.filter(i => i.value)" v-bind="o"></el-option>
          </template>
          <template v-if="element.type === 'el-radio-group'">
            <el-radio v-for="o in element?.options?.filter(i => i.label)" :label="o.value">{{ o.label }}</el-radio>
          </template>
          <template v-if="element.type === 'el-checkbox-group'">
            <el-checkbox v-for="o in element?.options?.filter(i => i.label)" :label="o.value">{{ o.label }}</el-checkbox>
          </template>
        </component>
      </template>
    </el-form-item>
  </div>
</template>
<script>
import subform from './subform.vue';
export default {
  components: {
    subform
  },
  props: ['element', 'formConfig', 'active'],
  data () {
    return {
      value: ''
    }
  },
  created () {
    this.getInitialValue(this.element.type)
  },
  computed: {
    style () {
      const style = { width: this.element.width + '%' }
      if (!this.formConfig.displayInner) {
        style.float = 'left'
      }
      return style
    },
    className () {
      if (this.element.type !== 'subform') {
        return this.active ? 'active' : ''
      }
      return ''
    }
  },
  methods: {
    getInitialValue(type) {
      if (type === 'el-select') {
        this.value = ''
      }
      if (type === 'el-checkbox-group') {
        this.value = []
      }
      if (type === 'el-slider') {
        this.value = 0
      }
      if (type === 'el-rate') {
        this.value = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.drag-box {
  padding-top: 8px;
  padding-bottom: 8px;
  box-sizing: border-box;
  border: 1px solid transparent;
  &.active {
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}
.item {
  margin-bottom: 0;
}
</style>